<script setup>
import {ref, onMounted, onActivated} from 'vue';
import { ElMessage } from "element-plus";
import axios from "axios";
import {takeAccessToken} from "@/api/login";
import {decodeJwtPayload} from "@/api/role";

// ------------------------------------------------------------------------

const role = ref()

// 这个是查询用户类型
function getAllInfo(){
  // 存储token的名字
  const authItemName = "access_token"
  // 取出token进行操作
  const authString = localStorage.getItem(authItemName) || sessionStorage.getItem(authItemName) || null

  // 使用JSON.parse方法将JSON字符串解析为JavaScript对象
  const authObj = JSON.parse(authString)

  // 解析值
  const authInfo = decodeJwtPayload(authObj.token)
  // 赋值
  role.value = authInfo.authorities[0]
}

// 反馈数据
const feedbacks = ref([]);

// 一进入就加载
onMounted(() => {
  getFeedBack()
  getAllInfo()
})

// 这个是函数
function getFeedBack(){
  axios.get('/api/suggest/lists',{
    headers: {
      'Authorization': `Bearer ${takeAccessToken()}`,
      "Content-Type": 'multipart/form-data'
    }
  })
  .then((res) => {
    // console.log(res.data.data[0].sugcontent)
    feedbacks.value = [...res.data.data]
  })
  .catch((err) => {
    console.log(err)
  })
}

// 在组件被 <keep-alive> 激活时执行获取数据的操作
onActivated(() => {
  getFeedBack();
});

// ------------------------------------------------------------------------

// 当前选中的反馈
const selectedFeedback = ref('')

// 展开与否
const dialogVisible = ref(false)
const replyDialogVisible = ref(false)

// 定义回复
const replyForm = ref()

// 查看反馈内容详情
function getMore(index){
  selectedFeedback.value = feedbacks.value[index].sugcontent
  dialogVisible.value = true
}

//

// ------------------------------------------------------------------------
// 意见反馈

// 反馈表单
const feedback = ref('')
const dialogFeedback = ref(false)

// 提交反馈逻辑
const submitFeedback = async () => {
  try {
    // 判断是否非空
    if(feedback.value === ''){
      ElMessage({
        message: '请先输入！',
        type: 'warning'
      })
      return
    }

    console.log(feedback.value)
    await axios.post('/api/suggest/feedback', {
      sugcontent: feedback.value
    },{
      headers: {
        'Authorization': `Bearer ${takeAccessToken()}`,
        "Content-Type": 'multipart/form-data'
      }
    })
    .then(() => {
      // 隐藏面板
      setTimeout(() => {
        dialogFeedback.value= false
      }, 800)

      // 假设后端返回成功，显示消息提示
      ElMessage({
        message: '感谢您的反馈！',
        type: 'success'
      })

      setTimeout(() => {
        // 清空表单
        feedback.value = ''
        // 重新获取显示
        getFeedBack()
      }, 1000)
    })
    .catch((err) => {
      console.log(err)
    })

  } catch (error) {
    // 捕获并处理任何错误
    console.log(error)
  }
};

// 存储函数
const selectedSugid = ref('')

// 展示反馈函数
function showReplyDialog(row) {
  selectedSugid.value = row.sugid; // 存储当前行的sugid
  replyDialogVisible.value = true;
  // 可以在这里初始化replyForm的值，如果需要的话
}

// 回复
const submitReply = () => {
  // console.log(selectedSugid.value)
  // console.log(replyForm.value)
  try {
    // 如果非空
    if(!replyForm.value) {
      ElMessage({
        message: '请先输入！',
        type: 'warning'
      })
      return
    }
    axios.put(`/api/suggest/reply/${selectedSugid.value}`, {
      reply: replyForm.value
    }, {
      headers: {
        'Authorization': `Bearer ${takeAccessToken()}`,
        "Content-Type": 'multipart/form-data'
      }
    })
    .then(() => {
      // console.log(res)
      replyDialogVisible.value = false
      replyForm.value = ''
      // 重新获取显示
      getFeedBack()
    })
    .catch((err) => {
      console.log(err)
    })

  }catch (err){
    console.log(err)
  }
}

</script>

<template>

  <el-card>

    <el-table :data="feedbacks" style="width: 100%" max-height="350" row-key="sugid">
      <el-table-column prop="sugid" label="反馈编号"></el-table-column>
      <el-table-column v-if="role === 'ROLE_man'" prop="username" label="反馈人"></el-table-column>
      <el-table-column prop="sugcontent" label="反馈内容"></el-table-column>
      <el-table-column prop="sugtime" label="反馈时间"></el-table-column>
      <el-table-column prop="reply" label="回复内容"></el-table-column>

      <!-- 根据是否是学生来显示和隐藏功能 -->
      <el-table-column label="操作">

        <template v-slot="scope">
          <el-button type="text" @click="getMore(scope.$index)">查看详情</el-button>
          <el-button v-if="role === 'ROLE_man'" type="text" @click="showReplyDialog(scope.row)">回复</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-- 查看详情和回复的弹窗  :title="selectedFeedback.feedbackId"-->
    <el-dialog title="反馈内容详情" v-model="dialogVisible" width="50%" style="margin-top: 188px">
      <p style="margin: 18px 0">{{ selectedFeedback }}</p>

      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">{{  role === 'ROLE_man' ? '取消' : '返回' }}</el-button>
          <el-button v-if="role === 'ROLE_man'" type="primary" @click="replyDialogVisible = true">回复</el-button>
        </div>
      </template>

    </el-dialog>

    <!-- 回复弹窗 -->
    <el-dialog v-model="replyDialogVisible" title="回复反馈" width="50%" style="margin-top: 188px;">
      <el-form style="margin: 18px 0">
        <el-form-item>
          <el-input v-model="replyForm"></el-input>
        </el-form-item>
      </el-form>

      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="replyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReply">回复</el-button>
        </div>
      </template>

    </el-dialog>

    <!-- 提交意见反馈 -->
    <el-button v-if="role === 'ROLE_stu'" type="danger" @click="dialogFeedback = true" style="margin-top: 18px">意见反馈</el-button>

    <!-- 意见反馈面板 -->
    <el-dialog title="意见反馈" v-model="dialogFeedback" @close="dialogFeedback = false" style="margin-top: 188px;">
      <el-form ref="feedbackForm">
        <el-form-item prop="feedback">
          <textarea :rows="6" class="areaFeed" v-model="feedback"></textarea>
        </el-form-item>
      </el-form>

      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="dialogFeedback = false">取 消</el-button>
          <el-button type="primary" @click="submitFeedback">提 交</el-button>
        </div>
      </template>
    </el-dialog>

  </el-card>

</template>

<style scoped>
.areaFeed{
  position: relative;
  display: block;
  resize: none !important;
  padding: 5px 11px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  color: var(--el-input-text-color,var(--el-text-color-regular));
  background-color: var(--el-input-bg-color,var(--el-fill-color-blank));
  background-image: none;
  -webkit-appearance: none;
  box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
  border-radius: var(--el-input-border-radius,var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  border: none;
}
</style>